<template>
	<div class="patient">
		<el-row>
			<el-col>
        <el-date-picker
          style="width:230px;"
          v-model="params.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
          :picker-options="pickerOptions2">
        </el-date-picker>
				<el-select v-model="params.status" @change="getList" placeholder="订单状态" style="width:120px;">
					<el-option
						v-for="item in searchList.status"
						:key="item.id"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
        <el-select v-model="params.product_price" @change="getList"  placeholder="购买金额" style="width:120px;">
					<el-option
						v-for="item in searchList.product_price"
						:key="item.id"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
        <el-select v-model="params.pay_type" @change="getList"  placeholder="购买方式" style="width:120px;">
					<el-option
						v-for="item in searchList.pay_type"
						:key="item.id"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
        <el-input
          style="width:220px;"
          placeholder="请输入机构ID或登录账号"
          clearable
          v-model="params.key_word">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
				<el-button @click="getList" class="search-btn" type="primary" icon="el-icon-search">搜索</el-button>
			</el-col>
		</el-row>
		<el-row class="patient-table">
			<el-table
				:data="list"
				stripe
				v-loading="tableLoading"
				header-row-class-name="table-header"
				empty-text=""
				:header-cell-style="tableHeaderObj"
				:cell-style="cellStyle"
				:max-height="tableHeight"
				style="width: 100%; border: 1px solid #ebeef5">
				<el-table-column
					prop="cnumber"
					label="机构ID"
					align="center">
				</el-table-column>
				<el-table-column
					prop="name"
					label="诊所名称"
					min-width="170"
					align="center">
				</el-table-column>
				<el-table-column
					prop="account"
					label="登录账号"
					min-width="150"
					align="center">
				</el-table-column>
				<el-table-column
					label="支付时间"
					min-width="160"
					align="center">
					<template slot-scope="scope">
						<span>{{scope.row.pay_time}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="购买金额"
					min-width="150"
					align="center">
					<template slot-scope="scope">
						{{scope.row.counts}}条（ ¥ {{scope.row.pay_price}} ）
					</template>
				</el-table-column>
				<el-table-column
					label="购买方式"
					min-width="120"
					align="center">
					<template slot-scope="scope">
						<span>{{scope.row.pay_type?scope.row.pay_type:'-'}}</span>
					</template>
				</el-table-column>
        <el-table-column
					label="订单状态"
					min-width="120"
					align="center">
					<template slot-scope="scope">
						<span class="color-red" v-if="scope.row.status==='支付失败'||scope.row.status==='未支付'">{{scope.row.status}}</span>
						<span v-else>{{scope.row.status}}</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="list-page">
				<el-pagination v-if="totalCount>10"
											 background
											 layout="total, slot, prev, pager, next"
											 :total="totalCount"
											 @current-change="handleCurrentChange">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
				<el-pagination v-else
											 background
											 layout="total, slot"
											 :total="totalCount">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
			</div>
		</el-row>
	</div>
</template>
<style scoped>
	/* 滚动条 */
	.form-wrap {
		height: 45vh;
	}
	.el-scrollbar {
		height:100%;
	}
	.form-wrap /deep/ .el-scrollbar .el-scrollbar__wrap {
		overflow-x: hidden;
	}
	.color-blue {
		color: #409eff;
	}
	.patient{
		position:relative;
		height:100%;
	}
	.search-input{
		width:320px;
	}
	.search-btn{
		margin-left:15px;
		margin-right:15px;
	}
	.add-btn{
		margin-right:50px;
	}
	.high-search{
		font-size:14px;
		color:#409eff;
		cursor: pointer;
	}
	.high-search i{
		margin-left:5px;
	}
	.patient-table{
		height:calc(100vh - 220px);
		margin-top:40px;
	}
	.list-page{
		text-align: center;
		position:absolute;
		bottom:0px;
		left:50%;
		transform:translateX(-50%);
		margin-top:20px;
	}
	.page-span{
		margin-left:-14px;
		font-size:13px;
		margin-right:20px;
	}
	.color-red{
		color: #f56c6c!important;
	}
	.color-b{
		color:#409EFF!important;
		cursor: pointer;
	}
	.block-row{
		height:55px;
	}
	.task-dialog >>> .el-dialog {
		/*height: 580px;*/
		overflow: auto;
		margin-top: 15vh!important;
	}
	.task-dialog >>> .el-dialog__header{
		padding:10px 20px 10px;
	}
	.task-dialog-header {
		padding: 0 30px;
		margin-bottom: 10px;
	}
	.task-dialog-header .header-left {
		float: left;
		font-weight: bold;
		font-size: 16px;
		line-height: 44px;
	}
	.task-dialog-header .header-right {
		float: right;
		clear: right;
	}
	.task-dialog-header .header-right >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
		margin-top:6px;
	}
	.task-dialog-title {
		height:4px;
		background-color: #f5f7fa;
		padding: 0 30px;
		margin-bottom: 20px;
	}
	.task-dialog >>> .el-dialog__body{
		padding:10px 0 20px;
	}
	.card-form .card-item-1{
		padding:0 30px;
		box-sizing: border-box;
	}
	.card-form .el-form-item {
		margin-bottom: 0!important;
	}
	.card-form .account-mobile span{
		display: block;
	}
	.card-form .rights-type-text{
		display: inline-block;
		margin-left:10px;
	}
	.card-form .card-item-1 >>> .el-input{
		width:220px;
	}
	.card-form >>> .el-form-item__label{
		text-align: left;
	}
	.card-form .key-info-left{
		width:50%;
		float:left;
	}
	.card-form .key-info-right{
		width:50%;
		float:right;
	}
	.card-form .key-info-right .picture-text{
		display: inline-block;
		width:100px;
		position:relative;
		top:-62px;
		line-height:22px;
		margin-left:27px;
	}
	.card-form .card-item-2{
		padding:0 0 0 30px;
		box-sizing: border-box;
	}
	.card-form .card-item-2 >>> .el-input{
		width:170px;
	}
	.card-form .card-item-3 >>> .el-input{
		width:572px;
	}
	.card-form .card-item-4 >>> .el-input{
		width:130px;
		margin-right:13px;
	}
	.card-form .card-item-5 >>> .el-input{
		width:210px;
	}
	.card-form .card-item-4 >>> .el-select:last-of-type .el-input{
		margin-right:0;
	}
	.card-form .birthday-text{
		display: inline-block;
		width: 30px;
		text-align: right;
	}
	.card-form >>> .el-form-item__label{
		padding:0;
	}
	.card-form >>> .el-form-item.is-required .el-form-item__label:before{
		letter-spacing: 0;
	}
	.card-form >>> .el-checkbox{
		width:110px;
	}
	.card-form >>> .el-checkbox+.el-checkbox{
		margin-left:0;
	}
	.patient >>> .el-table th.gutter{
		background-color:#f5f7fa;
	}
	.span-btn{
		color:#409EFF;
		cursor:pointer;
		margin-right:18px;
	}
	.span-btn:last-of-type{
		margin-right:0;
	}
	.authority-text{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width:165px;
		display: inline-block;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
		border-color: #fff;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
		background-color:#a5c7ff;
		border-color:#a5c7ff;
	}
	.card-form >>> .el-checkbox__input.is-disabled+span.el-checkbox__label{
		color:#a5c7ff;
	}
	.reset-dialog >>> .el-dialog{
		border-radius:5px;
	}
	.reset-dialog >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
	}
	.reset-dialog >>> .el-dialog__body{
		padding-top:10px;
	}
	.reset-dialog >>> .el-form-item__label{
		text-align: left;
	}
	.reset-dialog >>> .el-form-item{
		margin-bottom:0;
	}
	.code-line {
		width: calc(100% - 60px);
		height: 1px;
		background: #ccc;
		display: block;
		margin: 0 auto;
	}
</style>
<script>
	import { vasList, vasSelect } from '@/api/service'
	export default{
		data () {
			return {
				list: [],
				tableLoading: true,
				tableHeaderObj: {
					'background-color': '#f5f7fa',
					'color': '#606266',
					'height': '68px'
				},
				cellStyle: {
					'height': '68px',
					'cursor': 'pointer'
				},
				totalCount: 0,
				tableHeight: 0,
				page: {
					'per-page': 10,
					page: 1
				},
				pickerOptions2: {
					disabledDate(time) {
						return time.getTime() > Date.now()
					},
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit('pick', [start, end])
						}
					}]
				},
				searchList: [],
				row: {},
        params: {
          date: [],
          start_date: '',
          end_date: '',
          status: '',
          product_price: '',
          pay_type: '',
          key_word: ''

        }
			}
		},
		created () {
			this.getSelect()
			this.getList()
		},
		mounted() {
			const that = this
			that.$nextTick(() => {
				that.tableHeight = document.documentElement.clientHeight - 280
			})
			window.onresize = () => {
				that.$nextTick(() => {
					that.tableHeight = `${document.documentElement.clientHeight}` - 280
				})
			}
		},
		methods: {
			// 获取列表
			getList() {
        this.tableLoading = true
        if (this.params.date) {
          this.params.start_date = this.params.date[0]
          this.params.end_date = this.params.date[1]
        } else {
					this.params.start_date = ''
					this.params.end_date = ''
				}
				vasList(Object.assign({}, this.page, this.params)).then(response => {
					this.tableLoading = false
					this.list = response.data.data
					this.totalCount = response.data._meta.totalCount
				})
			},
			getSelect() {
				vasSelect().then(response => {
					this.searchList = response.data
				})
			},
			handleCurrentChange(val) {
				this.page.page = val
				this.getList()
			}
		}
	}
</script>
